<template>
	<view>
		<view class="nav_title">
			<van-icon @click="Cback" name="arrow-left" style="margin-left: 20rpx;" />
			<van-search shape="round" use-left-icon-slot="true" style="width: 530rpx;"
				left-icon="https://daiyue.gzzhenyi.net/static/image/store/search@4x.png" v-model="keyword"
				@search="onSearch" placeholder="请输入搜索关键词" />


		</view>
		<view class="title_msg">
			<image style="width: 100rpx;height: 100rpx;" :src="baseUrl + storeMsg.avatar" mode="aspectFill"></image>
			<view class="right">
				<view class="top">
					<view class="top_lf">
						<text>{{ storeMsg.shopname || '' }}</text>
						<view v-if="storeMsg.state != 2"
							:class="{ spanX: storeMsg.state == 0, spanZ: storeMsg.state == 1 }">
							{{ spanList[storeMsg.state] }}
						</view>
					</view>
					<view v-if="storeMsg.isFollow == 0" class="top_right" @click="concern">
						<van-icon style="margin: 4rpx 4rpx 0 0;" name="plus" color="#FF6200" size="12px" />
						<text>关注</text>
					</view>
					<view v-else class="top_right" style="background-color: #FF6200;" @click="concern">
						<text style="color: white;">已关注</text>
					</view>
				</view>
				<view class="bottom">
					<text>近90天成交额
						<text class="orign">{{ storeMsg.recent_amount || 0 }}</text>
					</text>
					<text>回头率
						<text class="orign">{{ storeMsg.return_rate || 0 }}%</text>
					</text>
					<text>综合服务分
						<text class="orign">{{ storeMsg.score || 0 }}</text>
					</text>
				</view>
				<view class="location_msg">
					<image style="width: 20rpx;height: 24rpx; margin-top: 8rpx; margin-right: 10rpx; "
						src="https://daiyue.gzzhenyi.net/static/image/store/local4x.png" mode="aspectFit"></image>
					<text>{{ storeMsg.city }}</text>
				</view>
			</view>
		</view>
		<!-- <view class="nav_tab">
			<view class="tab_item_a" :class="{ act: act == 0 }" @click="switchMain(0)">
				综合推荐
				<van-icon name="arrow-down" />
			</view>
			<view class="tab_item_a" :class="{ act: act == 1 }" @click="switchMain(1)">
				销量
			</view>
			<view class="tab_item_a" :class="{ act: act == 2 }" @click="switchMain(2)">
				新品
			</view>
			<view class="tab_item_a" :class="{ act: act == 3 }" @click="switchMain(3)">
				价格
				<van-icon name="arrow-down" />
			</view>
		</view> -->
		<view class="tabbox">
			<view class="liaol" @tap="tabboxCiks('normal')" :class="sort == 'normal' ? 'weight' : ''">综合推荐</view>
			<view class="liaol" @tap="tabboxCiks('sales')" :class="sort == 'sales' ? 'weight' : ''">销量</view>
			<view class="liaol" @tap="tabboxCiks('new')" :class="sort == 'new' ? 'weight' : ''">新品</view>

			<view class="jiag" @tap="tabboxCiks('price', sort == 'desc' ? 'asc' : 'desc')"
				:class="sort == 'desc' || sort == 'asc' ? 'weight' : ''">
				<view>价格</view>
				<view class="updown">
					<van-icon size="8" name="arrow-up" :color="sort == 'asc' ? '#333333' : '#999999'" />
					<van-icon size="8" name="arrow-down" :color="sort == 'desc' ? '#333333' : '#999999'" />
				</view>
			</view>
		</view>
		<!-- <swiper @change="changeSwiper" :current="currIndex" :style="{ height: swiperHeight + 'px' }">
			<swiper-item v-for="(item, i) in tab " :key="i"> -->
		<view :id="'wrap' + i" class="swiper-item">
			<view class="catr_item" v-for="(e, index) in productList" :key="index" @click="onClick(e)">
				<image style="width: 345rpx;height: 325rpx;" :src="baseUrl + e.image" mode="aspectFit"></image>
				<view style="padding: 0 10rpx 20rpx 10rpx;">
					<view class="title">{{ e.title }}</view>
					<view class="price" v-if="e.vip_price > 0">
						<text class="orign">会员价: <text class="big_origin">￥{{ e.vip_price }}</text> </text>
						<text class="gray">￥{{ e.market_price }}</text>
					</view>
					<view class="price" v-else>
						<text class="orign">验证后可查看产品价格</text>
					</view>
					<view class="buy">
						已售{{ e.comment }}份
					</view>
				</view>
			</view>
		</view>
		<!-- </swiper-item>

		</swiper> -->
		<!-- <van-cell title="展示弹出层" is-link @click="showPopup" /> -->

		<van-popup round :show="show" @close="onClose">
			<view class="hotGood" style="position: relative;">
				<image style="border-radius: 24rpx; width: 600rpx;height: 600rpx;" :src="baseUrl + hotStore.image"
					mode="aspectFit"></image>
				<image style="width: 125rpx;height: 165rpx;position: absolute;top: 14rpx;right: 30rpx;z-index: 999;"
					src="https://daiyue.gzzhenyi.net/static/image/store/hot@4x.png" mode=""></image>
				<view class="msg">
					<view class="price">
						<text class="orign">会员价: <text class="big_origin">￥{{ hotStore.vip_price }}</text> </text>
						<text class="gray">￥{{ hotStore.market_price }}</text>
					</view>
					<view class="buy">
						已售{{ hotStore.views }}份
					</view>
				</view>
				<view class="title">{{ hotStore.title }}</view>
				<view class="smollBox" @click="onClick(hotStore)">
					<view class="btn">
						立即查看
					</view>
				</view>

			</view>


		</van-popup>
		<image @tap.stop="onClose" v-if="show"
			style="width: 60rpx;height: 60rpx;position:fixed;z-index: 999;bottom: 80rpx;left: 345rpx;"
			src="https://daiyue.gzzhenyi.net/static/image/store/colse@4x.png" mode="aspectFit"></image>
	</view>





</template>

<script>
	import {
		getShopInfo,
		getGoodsList,
		followShop,
		getRecommendList,

	} from "@/api/api.js"
	import baseUrl from "@/api/baseUrl";

	export default {
		data() {
			return {
				baseUrl,
				show: false,
				currIndex: 0,
				swiperHeight: 0, // 滑块的高度(单位px)
				act: 0,
				value: "",
				tab: ["综合推荐", "销量", "新品", "价格"],
				spanList: ["限时抢购", "最近热门", ""],
				storeId: 0,
				// 热门商品推荐
				hotStore: {

				},

				productList: [],
				sort: 'normal',
				storeMsg: {},
				keyword: '',
				main_type: '',
			}
		},

		onLoad(options) {
			this.storeId = options.id
			this.main_type = options.main_type
			setTimeout(this.setSwiperHeight, 10)
			// this.showPopup()
			this.serve()
			this.shopList()
			this.distort()
		},

		methods: {
			distort() {
				getRecommendList({
					shop_id: this.storeId
				}).then(res => {
					if (res.code == 1 && res.data.list.length > 0) {
						this.hotStore = res.data.list[0]
						this.show = true
					}
				})
			},
			serve() {
				getShopInfo({
					shop_id: this.storeId
				}).then(res => {
					if (res.code == 1) {
						this.storeMsg = res.data
					}
				})
			},
			shopList(data) {
				getGoodsList({
					...data,
					keyword: this.keyword,
					main_type: this.main_type,
					shop_id: this.storeId,
					page: 1,
					limit: 50
				}).then(res => {
					if (res.code == 1) {
						this.productList = res.data.list
					}
				})
			},
			onSearch(e) {
				this.keyword = e.detail
				this.shopList()
			},
			tabboxCiks(s, o) {
				this.sort = o;
				let data = {
					sort: s,
					order: o || 'desc'
				};
				console.log('data', data)
				this.shopList(data);
			},
			onClick(item) {
				uni.navigateTo({
					url: `/long/productDetail/productDetail?main_type=${item.main_type}&id=${item.id}`
				})
			},
			showPopup() {
				this.show = true
			},

			onClose() {
				this.show = false
			},
			Cback() {
				uni.navigateBack()
			},
			concern() {
				followShop({
					shop_id: this.storeMsg.id
				}).then(res => {
					if (res.code == 1) {
						this.serve()
					}
				})
			},
			switchMain(num) {
				this.currIndex = num
				this.act = num
			},
			/* 切换 swiper 滑块 */
			changeSwiper(e) {
				this.currIndex = e.detail.current;
				this.act = this.currIndex
				setTimeout(this.setSwiperHeight, 10)
			},

			/* 动态设置 swiper 的高度 */
			setSwiperHeight() {
				const element = "#wrap" + this.currIndex;
				const query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec(res => {
					if (res && res[0]) this.swiperHeight = res[0].height;
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.weight {
		font-weight: bold !important;
	}

	.hotGood {
		.msg {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;

			.buy {
				font-family: PingFang SC;
				font-size: 22rpx;
				font-weight: normal;
				line-height: 19.8px;
				letter-spacing: 0px;
				color: #5C5C5C;
			}

			.price {


				.orign {
					font-family: PingFang SC;

					font-weight: normal;
					line-height: 27rpx;
					text-align: justify;
					/* 浏览器可能不支持 */
					letter-spacing: 0px;
					color: #FF6200;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;

					.big_origin {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
					}
				}

				.gray {
					font-family: PingFang SC;
					font-size: 22rpx;
					font-weight: normal;
					line-height: 22rpx;
					text-align: justify;
					/* 浏览器可能不支持 */
					letter-spacing: 0px;

					color: #A2A2A2;
				}
			}
		}

		.title {
			margin-top: 20rpx;
			font-family: PingFang SC;
			font-size: 30rpx;
			font-weight: normal;
			line-height: normal;
			text-align: justify;
			letter-spacing: 0px;
			color: #333333;
			padding: 0 20rpx;
		}

		.smollBox {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 84rpx 0;

			.btn {
				width: 440rpx;
				height: 70rpx;
				border-radius: 35rpx;
				background: #FF6200;
				font-size: 26rpx;
				letter-spacing: 0px;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.tabbox {
		padding: 20rpx 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}

	.van-dropdown-menu {
		background-color: transparent;
		box-shadow: none;
		color: #333333;
		font-size: 28rpx;
	}

	.van-dropdown-menu__title {
		padding: var(--dropdown-menu-title-padding, 0 24px 0 0);
	}

	.liaol {
		font-size: 26rpx;
		color: #5C5C5C;
		// margin-left: -85rpx;
		width: 110rpx;
	}

	.jiag {
		font-size: 26rpx;
		color: #5C5C5C;
		display: flex;
		align-items: center;
		column-gap: 8rpx;

		.updown {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}


	.swiper-item {
		display: flex;
		flex-wrap: wrap;

		.catr_item {
			margin-left: 20rpx;
			margin-top: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;

			.title {
				font-size: 30rpx;
				font-weight: normal;
				line-height: 30rpx;
				letter-spacing: -0.8px;
				color: #333333;
				margin-top: 16rpx;
				width: 300rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.price {
				margin-top: 16rpx;

				.orign {
					font-family: PingFang SC;

					font-weight: normal;
					line-height: 27rpx;
					text-align: justify;
					/* 浏览器可能不支持 */
					letter-spacing: 0px;
					color: #FF6200;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;

					.big_origin {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
					}
				}

				.gray {
					font-family: PingFang SC;
					font-size: 22rpx;
					font-weight: normal;
					line-height: 22rpx;
					text-align: justify;
					/* 浏览器可能不支持 */
					letter-spacing: 0px;

					color: #A2A2A2;
				}
			}

			.buy {
				font-family: PingFang SC;
				font-size: 22rpx;
				font-weight: normal;
				line-height: 20rpx;
				text-align: justify;
				/* 浏览器可能不支持 */
				letter-spacing: 0px;
				margin-top: 16rpx;
				color: #CCCCCC;
			}
		}
	}

	.title_msg {
		display: flex;
		align-items: center;
		background-color: #fff;
		// padding-left: 20rpx;
		padding: 20rpx;

		.right {
			margin-left: 20rpx;
			width: 570rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.top_lf {
					display: flex;
					align-items: center;

					text {
						font-family: PingFang SC;
						font-size: 30rpx;
						color: #333333;
					}

					.spanX {
						border-radius: 6rpx 6rpx 100rpx 6rpx;
						opacity: 1;
						font-size: 20rpx;
						color: #FFFFFF;
						background: linear-gradient(103deg, #F69700 -8%, #EB5E00 100%);
						padding: 0rpx 12rpx;
						margin-left: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.spanZ {
						border-radius: 6rpx 6rpx 100rpx 6rpx;
						opacity: 1;
						font-size: 20rpx;
						color: #FFFFFF;
						background: linear-gradient(107deg, #7388C7 -10%, #3F5096 100%);
						padding: 0rpx 12rpx;
						margin-left: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.top_right {
					width: 100rpx;
					height: 36rpx;
					border-radius: 18rpx;
					opacity: 1;
					background: #FFFFFF;
					border: 2rpx solid #FF6200;
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						font-size: 22rpx;
						font-weight: normal;
						line-height: normal;

						color: #FF6200;
					}
				}
			}

			.bottom {
				margin-top: 14rpx;
				font-size: 22rpx;
				font-weight: normal;
				line-height: 22rpx;
				letter-spacing: 0px;

				color: #909090;

				.orign {
					color: #FF7621;
					display: inline-block;
					margin-right: 32rpx;
				}


			}

			.location_msg {
				margin-top: 20rpx;
				display: flex;
				align-items: center;

				text {
					font-family: PingFang SC;
					font-size: 22rpx;
					font-weight: normal;
					line-height: 2rpx;
					text-align: right;
					letter-spacing: 0px;
					color: #909090;
				}
			}
		}
	}

	.nav_title {
		width: 100%;
		display: flex;
		align-items: center;
		padding-top: 80rpx;
		background-color: #fff;

	}

	.nav_tab {
		width: 660rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// justify-content: space-evenly;
		padding: 40rpx;
		// background-color: #fff;

		.tab_item_a {

			font-family: PingFang SC;
			font-size: 26rpx;
			font-weight: normal;
			line-height: 30rpx;
			text-align: center;
			letter-spacing: 0px;
			color: #5C5C5C;
		}

		.price {


			.orign {
				font-family: PingFang SC;

				font-weight: normal;
				line-height: 27rpx;
				text-align: justify;
				/* 浏览器可能不支持 */
				letter-spacing: 0px;
				color: #FF6200;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 22rpx;

				.big_origin {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
				}
			}

			.gray {
				font-family: PingFang SC;
				font-size: 22rpx;
				font-weight: normal;
				line-height: 22rpx;
				text-align: justify;
				/* 浏览器可能不支持 */
				letter-spacing: 0px;

				color: #A2A2A2;
			}
		}
	}

	.title {
		margin-top: 20rpx;
		font-family: PingFang SC;
		font-size: 30rpx;
		font-weight: normal;
		line-height: normal;
		text-align: justify;
		letter-spacing: 0px;
		color: #333333;
		padding: 0 20rpx;
	}

	.smollBox {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 84rpx 0;

		.btn {
			width: 440rpx;
			height: 70rpx;
			border-radius: 35rpx;
			background: #FF6200;
			font-size: 26rpx;
			letter-spacing: 0px;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.tabbox {
		padding: 20rpx 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}

	.van-dropdown-menu {
		background-color: transparent;
		box-shadow: none;
		color: #333333;
		font-size: 28rpx;
	}

	.van-dropdown-menu__title {
		padding: var(--dropdown-menu-title-padding, 0 24px 0 0);
	}

	.liaol {
		font-size: 26rpx;
		color: #5C5C5C;
		// margin-left: -85rpx;
		width: 110rpx;
	}

	.jiag {
		font-size: 26rpx;
		color: #5C5C5C;
		display: flex;
		align-items: center;
		column-gap: 8rpx;

		.updown {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}


	.swiper-item {
		/* display: flex;
	flex-wrap: wrap; */
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		padding: 20rpx;

		.catr_item {
			// margin-left: 20rpx;
			// margin-top: 20rpx;
			background-color: #fff;
			border-radius: 20rpx 20rpx 0 0;
			overflow: hidden;
			width: 100%;

			.title {
				font-size: 30rpx;
				font-weight: normal;
				line-height: 30rpx;
				letter-spacing: 0px;
				color: #333333;
				margin-top: 16rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 100%;
				overflow: hidden;
			}

			.price {
				margin-top: 16rpx;

				.orign {
					font-family: PingFang SC;

					font-weight: normal;
					line-height: 27rpx;
					text-align: justify;
					/* 浏览器可能不支持 */
					letter-spacing: 0px;
					color: #FF6200;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;

					.big_origin {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
					}
				}

				.gray {
					font-family: PingFang SC;
					font-size: 22rpx;
					font-weight: normal;
					line-height: 22rpx;
					text-align: justify;
					/* 浏览器可能不支持 */
					letter-spacing: 0px;

					color: #A2A2A2;
				}
			}

			.buy {
				font-family: PingFang SC;
				font-size: 22rpx;
				font-weight: normal;
				line-height: 20rpx;
				text-align: justify;
				/* 浏览器可能不支持 */
				letter-spacing: 0px;
				margin-top: 16rpx;
				color: #CCCCCC;
			}
		}
	}
</style>